<template>
  <div class="main">
    <div class="reglogin">
      <van-nav-bar title="用户注册" left-arrow />
      <article>
        <div class="top">
          <img src="../../images/log.jpg" alt="图片" class="log" />
          <span>手机号码注册</span>
        </div>

        <!-- 注册页 -->
        <div class="regist">
          <van-form>
            <van-field
              v-model="registerObj.name"
              name="用户名"
              label="用户名"
              placeholder="输入用户名"
              :rules="[{ required: true }]"
            />
            <van-field
              v-model="registerObj.phone"
              type="text"
              name="手机号"
              label="手机号"
              placeholder="输入手机号"
              :rules="[{ required: true }]"
            />
          </van-form>
        </div>
        <div class="goReg">
          <span @click="regGoEvt">去登录！</span>
          <span>手机号记不住？</span>
        </div>
        <div style="margin: 16px">
          <van-button
            @click="registerEvt"
            round
            block
            type="info"
            :disabled="!checked"
            :loading="loading"
            >注册</van-button
          >
        </div>
        <p>其他注册方式</p>
        <div class="icons">
          <van-icon class="icon" name="wechat" />
          <van-icon class="icon" name="alipay" />
        </div>
      </article>
    </div>

    <van-checkbox class="deal" v-model="checked" checked-color="#ffd101"
      >登录代表已阅读并同意《用户协议》与《隐私注册》</van-checkbox
    >
  </div>
</template>

<script>
// 单个接口引入
import { registerApi } from "../../apis/registerApi";

export default {
  data() {
    return {
      registerObj: {
        //手机号 用户
        phone: "",
        name: "",
      },
      checked: false,
      loading: false,
    };
  },

  methods: {
    regGoEvt() {
      this.$router.push("/login");
    },

    // 注册校验
    async registerEvt() {
      // 校验手机号是否正确和用户名是否输入
      if (!/^1[3-9]{1}[0-9]{9}$/.test(this.registerObj.phone)) {
        // 在全局注册了toast组件以后，会在prototype上添加一个$toast方法
        this.$toast({
          message: "请输入正确的手机号",
          position: "bottom",
        });
        return;
      }

      if (!this.registerObj.name) {
        this.$toast({
          message: "请输入正确的用户名",
          position: "bottom",
        });
        return;
      }

      if (this.loading) return;

      // 需要把节流的标识开启
      this.loading = true;
      // 调registerApi接口
      let result = await registerApi(this.registerObj);

      if (result.code === 200) {
        this.$toast.success("注册成功");
        this.$router.push("/login");
      } else {
        this.$toast.fail("注册失败，请重试！");
      }

      //节流标识应该等一下才关闭，避免用户点击比逻辑快
      setTimeout(() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="less">
@import "../../style/common.less";

.main {
  .van-cell::after {
    border-bottom: none;
  }
  .van-icon-cross {
    color: #eee;
    background-color: #ffd001d0;
    border-radius: 50%;
    padding: 1px;
  }
  width: 100%;
  height: 100%;
  
  .deal {
    padding: 0 15px;
    margin-top: 60px;
    color: #999;
    font-size: 14px;
  }
  .van-circle {
    width: 44px;
    height: 44px;
  }
  .van-circle__text {
    color: #fff;
  }
  .van-circle__hover {
    stroke: #ffd101;
  }
}

.reglogin {
  .van-nav-bar__title {
    font-size: 18px;
    font-weight: 600;
  }
  .van-nav-bar .van-icon {
    color: rgb(24, 22, 22);
    font-weight: 600;
  }
  > article {
    > .top {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 40px 0 20px 0;
      > img {
        width: 70px;
      }
      > span {
        font-weight: 600;
        font-size: 15px;
        margin-top: 8px;
      }
    }
    > .goReg {
      display: flex;
      justify-content: space-between;
      padding: 0 18px;
    }
    > p {
      margin: 50px 0 20px 0;
      color: #999;
      font-size: 15px;
      text-align: center;
    }
    > .icons {
      display: flex;
      justify-content: space-around;
      padding: 0 50px;
      > .icon {
        width: 45px;
        height: 45px;
        background-color: #666;
        border-radius: 50%;
        text-align: center;
        line-height: 45px;
        font-size: 28px;
        color: #ffd101;
      }
    }
  }

  .van-button--primary {
    color: #ffd101;
    background: none;
    border: none;
  }
  .van-cell__value {
    padding-left: 5px;
    border-bottom: 1px solid #eaeaea;
  }
  .van-button--info {
    color: #000;
    background-color: #ffd101;
    border: none;
  }
}
</style>
